<template>
  <div class="audit-box">
    <el-alert title="退回"
              class="alert-box"
              type="error"
              center
              show-icon
              :closable="false">
    </el-alert>
    <el-form ref="backForm"
             :model="backForm"
             :label-width="labelWidth"
             :disabled="opType!=='back'">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="examinePeople"
                        label="退回人员"
                        :rules="[required]">
            <el-input v-model.trim="backForm.examinePeople"
                      :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="backTime"
                        label="退回时间">
            <el-date-picker v-model="backForm.backTime"
                            :clearable="false"
                            :editable="false"
                            type="datetime"
                            placeholder="退回时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            style="width:100%">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="examineDes"
                        label="退回说明">
            <el-input placeholder=""
                      type="textarea"
                      :rows="3"
                      resize="none"
                      :maxlength="500"
                      v-model.trim="backForm.examineDes"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import dayjs from "dayjs";
export default {
  name: 'WaterSaveSingleBack',
  props: {
    opType: {
      type: String,
      default: 'back'
    },
    labelWidth: {
      type: String,
      default: '130px'
    },
  },
  data() {
    return {
      backForm: {
        examinePeople: '',
        status: '4', // 退回 - 4
        examineDes: '',
        backTime: ''
      },
      required: {
        required: true,
        message: '必填，不能为空',
        trigger: ['blur', 'change']
      }
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  methods: {
    resetForm(rowData, flag = '') {
      this.$nextTick(() => {
        let name = this.name;
        this.$refs.backForm.resetFields();
        this.backForm.examinePeople = name;
        // 如果是编辑，赋值退回信息
        if (this.opType !== 'back' && this.opType !== 'add') {
          this.assignmentAuditForm(rowData, flag);
        } else {
          this.backForm.backTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
        }
      })
    },
    // 赋值表单 flag 有值是审核数据和之前审核数据不一样的页面
    assignmentAuditForm(rowData, flag) {
      if (!flag) {
        this.backForm.examinePeople = rowData.examinePeople
        this.backForm.examineDes = rowData.examineDes
      } else {
        this.backForm.examinePeople = rowData.shry
        this.backForm.examineDes = rowData.shyj
      }
      this.backForm.backTime = rowData.backTime ? rowData.backTime : '';
    },
    handleBack() {
      this.$refs.backForm.validate(async (valid) => {
        if (valid) {
          this.$emit('singleBackSubmit', this.backForm);
        } else {
          this.msgWarning('请正确填写审核表单内容')
        }
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.alert-box {
  margin-bottom: 6px;
}
</style>